<script setup lang="ts">
import type { OrderItemType } from "@/type/lidare"
import {onActivated} from "vue"
const props = defineProps<{
  item: OrderItemType
}>();
onActivated(()=>{
  console.log(props.item);
});
const sloveTime = (time:string)=>{
  let temp = new Date(Number(time));
  console.log(temp);
  time = `${temp.getFullYear()}-${temp.getMonth()+1}-${temp.getDate()} ${temp.getHours()<10?'0'+temp.getHours():temp.getHours()}:${temp.getMinutes()<10?'0'+temp.getMinutes():temp.getMinutes()}:${temp.getSeconds()<10?'0'+temp.getSeconds():temp.getSeconds()}`
  return time;
}
</script>
<template>
  <div class="order-item">
    <header class="header">
      <div class="left">订单编号: <span>{{ props.item.serialNumber }}</span></div>
      <div class="right">已付款</div>
    </header>
    <div class="content">
      <div class="img-box">
        <img :src="props.item.image" alt="">
      </div>
      <div class="right">
        <div class="my-text title"><span v-if="props.item.conditionName">{{ props.item.conditionName }}</span>{{ props.item.fullName }}</div>
        <div class="tags">
          <div class="tag" v-for="(tag,index) in props.item.tags">{{ tag }}<span v-if="index!=props.item.tags.length-1">|</span></div>
        </div>
        <div class="price"><span>&yen;</span><span class="price-o">{{ Number.parseFloat(props.item.salesPrice)/100 }}</span></div>
      </div>
    </div>
    <footer class="footer">
      <div class="time">{{ sloveTime(props.item.orderCreateTime) }}</div>
      <div class="pay">实际支付: <span>&yen;{{ Number.parseFloat(props.item.salesPrice)/100 }}</span></div>
    </footer>
  </div>
</template>
<style lang="scss" scoped>
.order-item {
  width: 100%;
  background-color: var(--bgc-white);
  margin-bottom: .05rem;
  .header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-gray);
    box-sizing: border-box;
    padding: .1rem;
    font-size: .12rem;
    border-bottom: .01rem solid var(--border-gray);
    .right{
      color: var(--text-red);
    }
  }
  .content{
    width: 100%;
    box-sizing: border-box;
    padding: .1rem;
    display: flex;
    .img-box{
      width: .7rem;
      min-width: .7rem;
      height: .7rem;
      border-radius: .06rem;
      overflow: hidden;
    }
    .right{
      flex-grow: 1;
      margin-left: .05rem;
      .title{
        font-size: .15rem;
        -webkit-line-clamp: 2;
        >span{
          display: inline-block;
          background-color: var(--text-red);
          color: var(--text-white);
          font-size: .12rem;
          padding: 0 .02rem;
          border-radius: .02rem;
          box-sizing: border-box;
          height: .2rem;
          line-height: .2rem;
          margin-right: .05rem;
        }
      }
      .tags{
        display: flex;
        flex-wrap: wrap;
        color: var(--text-gray);
        .tag{
          margin-right: .05rem;
          font-size: .13rem;
          >span{
            margin-left: .05rem;
          }
        }
      }
      .price{
        font-size: .15rem;
        color: var(--text-red);
        font-weight: bold;
      }
    }
  }
  .footer{
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    border-top: .01rem solid var(--border-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .1rem;
    .time{
      font-size: .12rem;
      color: var(--text-gray);
    }
    .pay{
      font-size: .15rem;
      >span{
        font-size: .16rem;
        color: var(--text-red);
        font-weight: bold;
      }
    }
  }
}
</style>